import { defineComponent, PropType } from "vue";
export default defineComponent({
  name: "CustomerMoney",
  props: {
    money: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    customerClass: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    containerClass: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    symbolicClass: {
      type: Array as PropType<Array<string>>,
      default: () => [],
    },
    customerAngle: {
      type: Number as PropType<number>,
      default: () => -45,
    },
    customerTopClass: {
      type: String as PropType<string>,
      default: () => "",
    },
  },
  render() {
    const { money } = this.$props;
    return (
      <div class="flex items-end relative">
        <div>¥</div>
        {money.map((item: string) => {
          if (item === ".") {
            return (
              <div class={`relative ${this.containerClass}`}>
                <div class={`${this.symbolicClass} ${this.customerClass} absolute`}></div>
              </div>
            );
          } else if (item === ",") {
            return (
              <div class={`relative ${this.containerClass}`}>
                <div class={`${this.symbolicClass} ${this.customerClass} skew-y-[-45deg]`}></div>
                <div class={`absolute ${this.symbolicClass}  ${this.customerTopClass} ${this.customerClass}`}></div>
              </div>
            );
          } else {
            return item;
          }
        })}
      </div>
    );
  },
});
